<template>
  <div>
    <van-nav-bar
      title="千禧"
      left-text="123"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      >123567</van-nav-bar
    >
    <!-- 导航条 -->
    <van-tabs v-model="activeName" title-active-color="#ee0a24">
      <van-tab title="婚纱摄影" name="a">
        <div id="card-2">
          <div><img src="../assets/img/001.jpg" alt="" /></div>
          <div>
            <p>【Versailles rose】红金奢华定制主题</p>
            <p>10年高端婚礼策划</p>
            <van-tag type="danger">优选</van-tag>
            <span>层高10米</span>
            <span>|</span>
            <span>1号厅</span>
            <span style="font-size: medium; color: #ee0a24; font-weight: 600">
              ￥48888</span
            >
            <span>起</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="婚礼策划" name="b">
        <div>
          <div id="card-2">
            <div><img src="../assets/img/002.jpg" alt="" /></div>
            <div>
              <p>【Versailles rose】红金奢华定制主题</p>
              <p>10年高端婚礼策划</p>
              <van-tag type="danger">优选</van-tag>
              <span>层高10米</span>
              <span>|</span>
              <span>1号厅</span>
              <span style="font-size: medium; color: #ee0a24; font-weight: 600">
                ￥48888</span
              >
              <span>起</span>
            </div>
          </div>
          <div id="card-2">
            <div>
              <img
                src="https://s.haicaoyun.com/tmp_60a8ec99fec9d33541a35809bb17cae4.jpg?imageView2/1/w/160/h/160"
                alt=""
              />
            </div>
            <div>
              <p>【Versailles rose】红金奢华定制主题</p>
              <p>10年高端婚礼策划</p>
              <van-tag type="danger">优选</van-tag>
              <span> 层高10米 | 1号厅</span>
              <span style="font-size: medium; color: #ee0a24; font-weight: 600">
                ￥78888</span
              >
              <span> 起</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="婚礼用车" name="c">内容 31</van-tab>
      <van-tab title="婚纱礼服" name="d">内容 4</van-tab>
    </van-tabs>
  </div>
</template>


<script>
import { Toast } from "vant";
export default {
  name: "HomeSite",
  data() {
    return {
      activeName: "b",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/home",
      });
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>

<style lang="less" scoped>
#card-2 {
  background-color: rgba(250, 224, 224, 0.267);
  margin: 10px;
  width: 97%;
  height: 240px;
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
}
#card-2 > div:first-child {
  width: 200px;
  height: 200px;
  margin: 20px;
  border-radius: 10px;
}
#card-2 > div:first-child > img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
#card-2 > div:last-child {
  width: 800px;
  height: 200px;
  font-size: 12px;
  margin: 20px;
  margin-left: 0;
  text-align: left;
}
#card-2 > div:last-child > p:first-child {
  font-weight: bold;
}
#card-2 > div:last-child > p:nth-child(2) {
  display: block;
  margin: 30px 0 80px 10px;
}
#card-2 > div:last-child > span {
  display: inline-block;
  margin-left: 10px;
}
/deep/ .van-ellipsis {
  color: red;
}

/deep/ .van-nav-bar {
  background: black;
  color: green;
}

/deep/.van-icon {
  color: rgb(33, 8, 147);
}

/deep/ .van-nav-bar__text {
  color: aqua;
}
</style>
